import React from 'react';
import { motion } from 'framer-motion';
import { Sparkles, Heart, Users } from 'lucide-react';

const SoulMatchingPage: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-50 pt-20">
      <div className="max-w-md mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center py-12"
        >
          <div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full mx-auto mb-6 flex items-center justify-center">
            <Sparkles className="text-white" size={32} />
          </div>
          <h1 className="text-2xl font-bold text-gray-900 mb-4">灵魂匹配</h1>
          <p className="text-gray-600 mb-8">
            通过深度问答找到真正懂你的人
          </p>
          
          <div className="space-y-4">
            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="w-full btn-primary py-4 text-lg"
            >
              开始灵魂问答
            </motion.button>
            
            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="w-full btn-outline py-4 text-lg"
            >
              查看匹配结果
            </motion.button>
          </div>
        </motion.div>
      </div>
    </div>
  );
};

export default SoulMatchingPage;
